<template>
	<view class="container">
		<!-- 已选标签 -->
		<view>
			<text class="section-title">已选标签</text>
			<view v-if="activeIds.length === 0" class="empty-message">暂无已选标签</view>
			<view class="tag-container">
				<up-tag v-for="tag in activeIds" :key="tag" type="primary" size="mini" :closable="true"
					@close="doClose(tag)" style="margin: 4px;">
					{{ tag }}
				</up-tag>
			</view>
		</view>

		<!-- 标签分类 -->
		<view>
			<text class="section-title">选择标签</text>
			<view v-for="(category, index) in tagList" :key="index" class="category-container">
				<!-- 分组标题 -->
				<view class="category-header" @click="toggleCategory(index)">
					<text>{{ category.text }}</text>
					<view class="category-icon">
						<text>{{ expandedCategories[index] ? "▲" : "▼" }}</text>
					</view>
				</view>

				<!-- 分组内容 -->
				<view v-if="expandedCategories[index]" class="tag-container scrollable-container">
					<!-- 标签 -->
					<up-tag v-for="(tag, tagIndex) in category.children" :key="tagIndex" type="default" size="mini"
						:plain="!activeIds?.includes(tag.id)" :style="{
              backgroundColor: activeIds?.includes(tag.id) ? '#007aff' : '#f5f5f5',
              color: activeIds?.includes(tag.id) ? '#fff' : '#333',
            }" @click="toggleTag(tag.id)" style="margin: 4px;">
						<text v-for="(part, index) in highlightKeyword(tag.text)" :key="index"
							:style="{ color: part.isHighlight ? '#ff5722' : '#333', fontWeight: part.isHighlight ? 'bold' : 'normal' }">
							{{ part.text }}
						</text>
					</up-tag>

					<!-- 未匹配标签提示 -->
					<view v-if="category.children.length === 0" class="empty-category">
						暂无匹配标签
					</view>
				</view>
			</view>
		</view>
		<!-- 设置按钮 -->
		<up-button type="primary" text="设置" class="search-button" @click="doUserTags"></up-button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import myAxios from "@/plugins/myAxios";
	import {
		getCurrentUser
	} from '@/services/user.ts'
	// 原始标签列表
	const originTagList = [{
			text: "性别",
			children: [{
					text: "男",
					id: "男"
				},
				{
					text: "女",
					id: "女"
				},
			],
		},
		{
			text: "学院",
			children: [{
					text: "智能科技学院",
					id: "智能科技学院"
				},
				{
					text: "汽车工程学院",
					id: "汽车工程学院"
				},
				{
					text: "商学院",
					id: "商学院"
				},
				{
					text: "人文学院",
					id: "人文学院"
				},
				{
					text: "盛宝金融科技学院",
					id: "盛宝金融科技学院"
				},
				{
					text: "艺术设计学院",
					id: "艺术设计学院"
				},
				{
					text: "体育与健康学院",
					id: "体育与健康学院"
				},
				{
					text: "吉利科技航空航天学院",
					id: "吉利科技航空航天学院"
				},
				{
					text: "博雅学院",
					id: "博雅学院"
				},
				{
					text: "创新创业学院",
					id: "创新创业学院"
				},
				{
					text: "外国语言与文化学院",
					id: "外国语言与文化学院"
				},
				{
					text: "马克思主义学院",
					id: "马克思主义学院"
				},
			],
		},
		{
			text: "专业",
			children: [{
					text: "计算机科学与技术",
					id: "计算机科学与技术"
				},
				{
					text: "网络工程",
					id: "网络工程"
				},
				{
					text: "数据科学与大数据",
					id: "数据科学与大数据"
				},
				{
					text: "虚拟现实技术",
					id: "虚拟现实技术"
				},
				{
					text: "车辆工程",
					id: "车辆工程"
				},
				{
					text: "汽车服务工程",
					id: "汽车服务工程"
				},
				{
					text: "机器设计制造及其自动化",
					id: "机器设计制造及其自动化"
				},
				{
					text: "新能源汽车工程",
					id: "新能源汽车工程"
				},
				{
					text: "机器人工程",
					id: "机器人工程"
				},
				{
					text: "智能车辆工程",
					id: "智能车辆工程"
				},
				{
					text: "知识产权",
					id: "知识产权"
				},
				{
					text: "艺术设计学",
					id: "艺术设计学"
				},
				{
					text: "数字媒体艺术",
					id: "数字媒体艺术"
				},
				{
					text: "产品设计",
					id: "产品设计"
				},
				{
					text: "环境艺术设计",
					id: "环境艺术设计"
				},
				{
					text: "财务管理",
					id: "财务管理"
				},
				{
					text: "人力资源管理",
					id: "人力资源管理"
				},
				{
					text: "市场营销",
					id: "市场营销"
				},
				{
					text: "审计学",
					id: "审计学"
				},
				{
					text: "管理科学与工程",
					id: "管理科学与工程"
				},
				{
					text: "大数据管理与应用",
					id: "大数据管理与应用"
				},
				{
					text: "物流管理",
					id: "物流管理"
				},
				{
					text: "电子商务",
					id: "电子商务"
				},
				{
					text: "国际经济与贸易",
					id: "国际经济与贸易"
				},
				{
					text: "经济与金融",
					id: "经济与金融"
				},
				{
					text: "金融科技",
					id: "金融科技"
				},
				{
					text: "飞行器控制与信息工程",
					id: "飞行器控制与信息工程"
				},
				{
					text: "飞行器制造工程",
					id: "飞行器制造工程"
				},
				{
					text: "运动康复",
					id: "运动康复"
				},
				{
					text: "体育经济与管理",
					id: "体育经济与管理"
				},
				{
					text: "学前教育",
					id: "学前教育"
				},
				{
					text: "小学教育",
					id: "小学教育"
				},
				{
					text: "表演",
					id: "表演"
				},
				{
					text: "广播电视编导",
					id: "广播电视编导"
				},
				{
					text: "网络与新媒体",
					id: "网络与新媒体"
				},
				{
					text: "动画",
					id: "动画"
				},
				{
					text: "英语",
					id: "英语"
				},
			],
		},
		{
			text: "体育爱好",
			children: [{
					text: "篮球",
					id: "篮球"
				},
				{
					text: "足球",
					id: "足球"
				},
				{
					text: "乒乓球",
					id: "乒乓球"
				},
				{
					text: "羽毛球",
					id: "羽毛球"
				},
				{
					text: "橄榄球",
					id: "橄榄球"
				},
				{
					text: "台球",
					id: "台球"
				},
				{
					text: "跑步",
					id: "跑步"
				},
				{
					text: "滑板",
					id: "滑板"
				},
			],
		},
	];

	// 搜索文本、筛选结果等响应式变量
	const searchText = ref("");
	const tagList = ref(originTagList);
	const activeIds = ref([]);
	const expandedCategories = ref(originTagList.map(() => true));
	const user = ref("");
	onMounted(async () => {
		user.value = await getCurrentUser();
		console.log(user.value.tags);
		if (!user.value) {
			uni.showFailToast('用户未登录');
			return;
		}
		//设置标签的格式
		if (user.value.tags) {
			user.value.tags = JSON.parse(user.value.tags);
		}
		// activeIds.value = user.value.tags;
		activeIds.value = user.value?.tags ?? [];
	})
	// 搜索功能
	const onSearch = () => {
		if (!searchText.value.trim()) {
			tagList.value = originTagList;
			expandedCategories.value = originTagList.map(() => true);
			return;
		}
		tagList.value = originTagList.map((category) => {
			const filteredChildren = category.children.filter((item) =>
				item.text.includes(searchText.value)
			);
			return {
				...category,
				children: filteredChildren
			};
		});
		expandedCategories.value = tagList.value.map(() => true);
	};

	// 取消搜索
	const onCancel = () => {
		searchText.value = "";
		tagList.value = originTagList;
		expandedCategories.value = originTagList.map(() => true);
	};

	// 切换标签选中状态
	const toggleTag = (id) => {
		if (activeIds.value.includes(id)) {
			activeIds.value = activeIds.value.filter((item) => item !== id);
		} else {
			activeIds.value.push(id);
		}
	};

	// 切换类别展开状态
	const toggleCategory = (index) => {
		expandedCategories.value[index] = !expandedCategories.value[index];
	};

	// 关闭选中标签
	const doClose = (tag) => {
		activeIds.value = activeIds.value.filter((item) => item !== tag);
	};

	// 高亮关键字
	const highlightKeyword = (text) => {
		if (!searchText.value || !text) return [{
			text,
			isHighlight: false
		}];
		const keyword = searchText.value;
		const parts = text.split(new RegExp(`(${keyword})`, "gi"));
		return parts.map((part) => ({
			text: part,
			isHighlight: part.toLowerCase() === keyword.toLowerCase(),
		}));
	};

	/**
	 * 设置标签
	 */
	const doUserTags = async () => {
		const res = await myAxios.post('/user/update', {
			id: user.value.id,
			tags: JSON.stringify(activeIds.value),
		})
		console.log(res, "修改信息")
		if (res.code === 0 && res.data > 0) {
			uni.showToast({
				title: "修改成功",
				type: "success"
			});
			setTimeout(() => {
				uni.switchTab({
					url: "/pages/profile/index",
				});
			}, 1000)

		} else {
			uni.showToast({
				title: "修改失败",
				type: "error"
			});
		}
	}
</script>


<style scoped>
	.container {
		padding: 16px;
		background-color: #f9f9f9;
	}

	.search-container {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}

	.search-input {
		flex: 1;
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 20px;
		font-size: 14px;
		background-color: #fff;
	}

	.clear-button {
		margin-left: 8px;
		background: transparent;
		border: none;
		color: #007aff;
		font-size: 14px;
		cursor: pointer;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin: 16px 0 8px;
	}

	.category-container {
		margin-bottom: 12px;
		background-color: #fff;
		border-radius: 8px;
		padding: 8px 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.category-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		font-size: 14px;
		color: #333;
	}

	.category-icon {
		font-size: 12px;
		color: #888;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding-top: 8px;
	}

	.scrollable-container {
		max-height: 150px;
		overflow-y: auto;
	}

	.empty-category {
		padding: 12px;
		background-color: #f5f5f5;
		border-radius: 8px;
		text-align: center;
		color: #aaa;
		font-size: 14px;
		margin-top: 8px;
	}

	.search-button {
		margin-top: 16px;
		width: 100%;
		border-radius: 24px;
	}

	.highlight {
		color: #ff5722;
		font-weight: bold;
	}
</style>